
import { Divider } from 'antd'
import { themeStore } from '../Config/zustand'



const LoginMapping = [
    { label: '默认登录页面', value: 'LoginA01' },
]

const SignUpMapping = [
    { label: '默认登录窗口', value: 'SignA01' },
]

const LoadingMapping = [
    { label: '蒙娜丽莎', value: 'LoadSvg' },
    { label: '加载一', value: 'LoadA01' },


]
const ThemeTempMapping = [
    { label: '一号模板', value: 'ThemeA01' },
    { label: '二号模板', value: 'ThemeA02' },

]


const SetSystemCONFIG = () => {
    const { theme, updateTheme } = themeStore()
    const { loginPage, signPage, loadPage, template } = theme

    const onLoginSelect = e => {
        theme.loginPage = e
        updateTheme(theme)
    }

    const onSignSelect = e => {
        theme.signPage = e
        updateTheme(theme)
    }

    const onLoadSelect = e => {
        theme.loadPage = e
        updateTheme(theme)
    }

    const onThemeSelect = e => {
        theme.template = e
        updateTheme(theme)
    }



    return (
        <div className='SetSystemCONFIG'>
            <Divider orientation="left" >系统设置</Divider>
            <div className='Content'>
                <div className='Title'>登录页面</div>
                <div className='SelectBox'>
                    {LoginMapping.map(({ label, value }) =>
                        <div key={value} className={loginPage === value ? 'active' : ''} onClick={() => onLoginSelect(value)}>{label}</div>
                    )}
                </div>

                <div className='Title'>登录窗口</div>
                <div className='SelectBox'>
                    {SignUpMapping.map(({ label, value }) =>
                        <div key={value} className={signPage === value ? 'active' : ''} onClick={() => onSignSelect(value)}>{label}</div>
                    )}
                </div>

                <div className='Title'>加载样式</div>
                <div className='SelectBox'>
                    {LoadingMapping.map(({ label, value }) =>
                        <div key={value} className={loadPage === value ? 'active' : ''} onClick={() => onLoadSelect(value)}>{label}</div>
                    )}
                </div>

                <div className='Title'>后台模板</div>
                <div className='SelectBox'>
                    {ThemeTempMapping.map(({ label, value }) =>
                        <div key={value} className={template === value ? 'active' : ''} onClick={() => onThemeSelect(value)}>{label}</div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default SetSystemCONFIG;